import React, {useRef, useState} from "react";
import {ActionType, ModalForm, PageContainer, ProFormTextArea, ProTable} from "@ant-design/pro-components";
import {getAllFeedbacks, processFeedback} from "@/services/feedback/feedback";
import {DatePicker, message, Spin} from "antd";
import moment from "moment";

const Feedback = () => {
  const [loading, setLoading] = useState(false);

  const actionRef = useRef<ActionType>();
  const formRef = useRef();

  const [currentIndex, setCurrentIndex] = useState(0)
  const [size, setSize] = useState(10)

  const [record, setRecord] = useState<FEEDBACK.Feedback>(null)
  const [processModal, setProcessModal] = useState(false)
  const {RangePicker} = DatePicker;

  const columns = [
    {
      title: '序号',
      dataIndex: 'feedbackId',
      hideInSearch: true,
    }, {
      title: '门店',
      dataIndex: 'departmentName',
      hideInSearch: true,
    }, {
      title: '销售',
      dataIndex: 'memberName',
      hideInSearch: true,
    }, {
      title: '微信群',
      dataIndex: 'wechatGroupName',
      hideInSearch: true,
    }, {
      title: '用户ID',
      dataIndex: 'customerId',
      hideInSearch: true,
    }, {
      title: '微信昵称',
      dataIndex: 'customerNickname',
      hideInSearch: true,
    }, {
      title: '反馈时间',
      dataIndex: 'feedbackTime',
      hideInTable: true,
      valueType: 'dateRange',
      renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
        // 当表单项被渲染时，使用RangePicker组件
        if (type === 'form') {
          return <RangePicker showTime={{format: 'HH:mm:ss'}} format="YYYY-MM-DD HH:mm:ss" {...rest} />;
        }
        // 使用默认渲染逻辑
        return defaultRender(_);
      },
    },{
      title: '反馈时间',
      dataIndex: 'feedbackTime',
      render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
      hideInSearch: true,
    }, {
      title: '反馈内容',
      dataIndex: 'feedbackContent',
    }, {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        <a key="editable" onClick={() => {
          setRecord(record)
          setProcessModal(true)
        }}>
          {record.processComment? record.processComment : '标记解决'}
        </a>,
      ],
    }
  ]
  return (
    <PageContainer title={'意见反馈'}>
      <Spin spinning={loading} tip="加载中...">
      <ProTable
        actionRef={actionRef}
        columns={columns}
        request={async (params, sort, filter) => {
          const reqParams = {
            ...params,
            page: currentIndex,
            size
          }
          if (reqParams.feedbackTime) {
            reqParams.searchTimeStart = String(params.feedbackTime).split(',')[0]
            reqParams.searchTimeEnd = String(params.feedbackTime).split(',')[1]
          }
          const res = await getAllFeedbacks(reqParams);
          return {
            data: res.data.records,
            success: true,
            total: res.data.total
          }
        }}
        pagination={{
          pageSize: size,
          onChange: (page) => setCurrentIndex(page),
        }}
      />
      <ModalForm
        formRef={formRef}
        title="处理反馈"
        open={processModal}
        onOpenChange={(open) => {
          setProcessModal(open)
          formRef.current?.setFieldsValue({
            processComment: record.processComment,
          });
        }}
        onFinish={async (values) => {
          console.log('process feedback', values)
          const res = await processFeedback({
            id: record.feedbackId,
            processComment: values.processComment
          })
          if (res.code === 1) {
            message.success('处理成功')
            actionRef.current?.reload()
            return true
          }else {
            message.error('处理失败')
            return false
          }
        }}
      >
        <ProFormTextArea
          name="processComment"
          label="处理结果"
          placeholder="请输入处理结果"
          rules={[
            {
              required: true,
              message: '请输入处理结果',
            },
          ]}
        />
      </ModalForm>
      </Spin>
    </PageContainer>
  )
}

export default Feedback;
